<template>
    <el-card>

       <!-- 新增|刷新 -->
       <ListHeader @create="handleCreate" @refresh="getData"/>
   
       <el-table :data="tableData"  v-loading="loading">
         <el-table-column prop="id" label="序號" />
         <el-table-column prop="name" label="等級名稱" />
        
         <el-table-column prop="integral" label="所需積分" />
           
        
         <el-table-column prop="created_at" label="創建時間"  />
    
         <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             
            
               <el-button type="primary" size="small"  @click="handleEdit(scope.row)">修改</el-button>
   
             <!-- <el-popconfirm title="是否要删除？" confirmButtonText="確認" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                   <template #reference>
                       <el-button type="danger" size="small">删除</el-button>
                   </template>
               </el-popconfirm> -->
             
           </template>
         </el-table-column>
         
       </el-table>
   
       <div class="flex items-center justify-center mt-5">
           <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
       </div>
   
       <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
         <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
           <el-form-item label="等級名稱" prop="name">
             <el-input v-model="form.name" placeholder="等級名稱"></el-input>
           </el-form-item>
           <el-form-item label="所需積分" prop="integral">
             <el-input type="number" v-model="form.integral" placeholder="所需積分"></el-input>
           </el-form-item>
         
         </el-form>
       </FormDrawer>
    </el-card>
   </template>
   
    <script setup>
   import { ref } from "vue"
   import ListHeader from "@/components/ListHeader.vue";
   import FormDrawer from "@/components/FormDrawer.vue";
   import { useInitTable,useInitForm } from '@/composables/useCommon.js'
   
   
   import {
     getintegral,
     del,
     update,
     create
   } from "@/api/integral.js"
   const roles = ref([])
   const {
     searchForm,
     resetSearchForm,
     tableData,
     loading,
     currentPage,
     total,
     limit,
     getData,
     handleDelete
   } = useInitTable({
     getList:getintegral,
     delete:del,
    
   })
   
   const {
     formDrawerRef,
     formRef,
     form,
     rules,
     drawerTitle,
     handleSubmit,
     handleCreate,
     handleEdit
   } = useInitForm({
     form:{
         name: "",
         integral: 0,
     },
     getData,
     update:update,
     create:create
   })
   
   </script>
   
   